<template>
  <div>
    <div class="titles">
      <i @click="goBack" class="iconfont fl">&#xe624;</i>
      <h3 class="title-h3">手机号认证</h3>
    </div>
    <div class="form-div">
      <div class="fl">手机号</div>
      <div class="fr">{{queryUserPhoneInfo.loginName}}</div>
      <div style="clear: both;"></div>
      <mt-field
        label="运营商"
        placeholder="请选择运营商"
        type="tel"
        v-model="yunyingshang"
        :readonly="isReadonly">
      <!--@click.native.capture="sheetVisible = true"-->
      </mt-field>
      <mt-field
        label="服务密码"
        placeholder="请输入运营商服务密码"
        type="tel"
        v-model="queryUserPhoneInfo.password">
      </mt-field>
      <div v-if="yunyingshang === '移动'" class="">移动</div>
      <div v-else-if="yunyingshang === '电信'">
        <div v-if="isShow" class="btn" @click="getImgCode">获取图片验证码</div>
        <div v-else class="btn">请稍后</div>
        <mt-field
          label="图片验证码"
          placeholder="请输入图片验证码"
          type="tel"
          v-model="imgCode">
        </mt-field>
        <img v-if="haveImg" :src="'data:' + imgData + ';base64,' + imgSrc" alt="" />
        <div class="btn" @click="doNext">下一步</div>
        <div v-if="isMsg">
          <mt-field
            label="短信验证码"
            placeholder="请输入短信验证码"
            type="tel"
            v-model="msgCode">
          </mt-field>
          <div class="btn" @click="sendMsg">提交</div>
        </div>
      </div>
      <div v-else-if="yunyingshang === '联通'">联通</div>
    </div>
  </div>
</template>

<script>
import {queryUserPhoneInfo1, getUserPhone, queryUserPhoneInfo5, queryUserPhoneInfo4, queryUserPhoneInfo3, queryUserPhoneInfo6} from '../../api/person.js'
export default {
  data () {
    return {
      queryUserPhoneInfo: {
        userId: '',
        loginName: '',
        password: ''
      },
      userNum: '',
      crawlId: '',
      isReadonly: true,
      isShow: true,
      haveImg: false,
      isMsg: false,
      yunyingshang: '移动',
      imgData: '',
      imgSrc: '',
      resData: {},
      imgCode: '',
      msgCode: ''
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.push('/index/person')
      error
    }
  },
  methods: {
    goBack () {
//    this.$router.push('/index/person')
      this.$router.go(-1)
    },
    doNext () {
      this.$indicator.open('提交中，请稍后')
      this.queryUserPhoneInfo4()
      clearInterval(time2)
      let time2 = setInterval(() => {
        this.queryUserPhoneInfo5()
        if (this.resData.resCode === '1004') {
          clearInterval(time2)
          this.$indicator.close()
          this.$messagebox.alert(this.resData.message)
        } else if (this.resData.resCode === '1001') {
          this.isMsg = true
          clearInterval(time2)
          this.$indicator.close()
        }
      }, 2000)
    },
    getImgCode () {
      if (this.queryUserPhoneInfo.password !== '') {
        this.isShow = false
      }
      if (this.crawlId === '') {
        this.$indicator.open('提交中，请稍后')
        this.queryUserPhoneInfo1()
        clearInterval(times)
        let times = setInterval(() => {
          this.queryUserPhoneInfo5()
          if (this.resData.resCode === '1002' && this.resData.contentType !== '') {
            this.imgData = this.resData.contentType
            this.imgSrc = this.resData.imageBytes
            this.haveImg = true
            this.isShow = true
            this.$forceUpdate()
            console.log(this.resData.contentType)
            clearInterval(times)
            this.$indicator.close()
          }
        }, 2000)
      }
    },
    sendMsg () {
      this.$indicator.open('提交中，请稍后')
      this.queryUserPhoneInfo3()
      clearInterval(time1)
      let time1 = setInterval(() => {
        this.queryUserPhoneInfo5()
        if (this.resData.resCode === '7000') {
          this.queryUserPhoneInfo6()
          clearInterval(time1)
          this.$indicator.close()
        } else if (this.resData.resCode === '4001') {
          console.log(this.resData)
        } else if (this.resData.resCode === '1003') {
          clearInterval(time1)
        } else {
          console.log(this.resData, 'else')
        }
      }, 2000)
    },
    async getUserPhone () {
      try {
        this.$indicator.open('提交中，请稍后')
        let data = await getUserPhone({userNum: this.userNum})
        this.queryUserPhoneInfo.loginName = data.data.userPhone
        let CMCC = /(^((13[4-9]{1})|(147)|(15[0-2]{1})|(15[7-9]{1})|(178)|(18[2-4]{1})|(18[7-8]{1}))\d{8}$)|(^((1703)|(1705)|(1706))\d{7}$)/;//中国移动
        let CUCC = /(^((13[0-2]{1})|(145)|(155)|(156)|(171)|(175)|(176)|(185)|(186))\d{8}$)|(^(170[7-9]{1})\d{7}$)/;//中国联通
        let CTCC = /(^((133)|(149)|(153)|(173)|(177)|(180)|(181)|(189)|(199))\d{8}$)|(^(170[0-2]{1})\d{7}&)/;//中国电信
        if (CMCC.test(this.queryUserPhoneInfo.loginName)) {
          this.yunyingshang = '移动'
        } else if (CUCC.test(this.queryUserPhoneInfo.loginName)) {
          this.yunyingshang = '联通'
        } else if (CTCC.test(this.queryUserPhoneInfo.loginName)) {
          this.yunyingshang = '电信'
        }
        this.$indicator.close()
      } catch (err) {
        console.log(err)
      }
    },
    async queryUserPhoneInfo1 () {
      try {
        let data = await queryUserPhoneInfo1(this.queryUserPhoneInfo)
        console.log(data)
        if (data.data.retCode === '9999') {
          this.$messagebox.alert(data.data.retMsg)
          return false
        } else {
          this.crawlId = data.data.data.crawlId
        }
      } catch (err) {
        console.log(err)
      }
    },
    async queryUserPhoneInfo5 () {
      try {
        
        let data = await queryUserPhoneInfo5({
          userId: this.queryUserPhoneInfo.userId,
          loginName: this.queryUserPhoneInfo.loginName
        })
        console.log(data)
        this.resData = data.data.data
      } catch (err) {
        console.log(err)
      }
    },
    async queryUserPhoneInfo4 () {
      try {
        
        let data = await queryUserPhoneInfo4({
          imgCode: this.imgCode,
          userId: this.queryUserPhoneInfo.userId,
          loginName: this.queryUserPhoneInfo.loginName,
          crawlId: this.crawlId
        })
      } catch (err) {
        console.log(err)
      }
    },
    async queryUserPhoneInfo3 () {
      try {
        let data = await queryUserPhoneInfo3({
          msgCode: this.msgCode,
          userId: this.queryUserPhoneInfo.userId,
          loginName: this.queryUserPhoneInfo.loginName,
          crawlId: this.crawlId
        })
      } catch (err) {
        console.log(err)
      }
    },
    async queryUserPhoneInfo6 () {
      try {
        let data = await queryUserPhoneInfo6({
          phoneNo: this.queryUserPhoneInfo.loginName
        })
        console.log(data)
      } catch (err) {
        console.log(err)
      }
    }
  },
  created: function () {
    this.userNum = this.$store.state.userNum
    this.getUserPhone()
    this.queryUserPhoneInfo.userId = this.$store.state.userNum
  }
}
</script>

<style scoped>
  .titles{
    height: 1.6rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .title-h3{
    text-align: center;
    line-height: 1.6rem;
    font-size: .8rem;
  }
  .iconfont{
    line-height: 1.6rem;
    left: .5rem;
    font-size: .8rem;
    position: absolute;
  }
  .wrap-div-send{
    margin-top: 1.8rem;
    padding-top: 3rem;
  }
  .form-div{
    margin-top: 1.8rem;
  }
  .flex{
    text-align: center;
    font-size: .6rem;
    width: 10rem;
    margin: 0 auto .8rem;
  }
  .btn{
    background: #e94c75;
    color: #ffffff;
    border-radius: .8rem;
    padding: .3rem;
  }
</style>
